<template>
  <view class="login-container">
    <view class="login-form">
      <view class="logo-container">
        <image class="logo" src="/static/logo.png"></image>
        <view class="title">欢迎登录</view>
      </view>

      <uni-forms ref="formRef" :modelValue="formData" :rules="rules">
        <!-- 手机号输入 -->
        <uni-forms-item name="mobile">
          <uni-easyinput v-model="formData.mobile" placeholder="请输入手机号码" type="number" maxlength="11" />
        </uni-forms-item>

        <!-- 密码输入 -->
        <uni-forms-item name="password">
          <uni-easyinput v-model="formData.password" placeholder="请输入密码" type="password" password-icon="true"
            maxlength="20" />
        </uni-forms-item>

        <!-- 登录按钮 -->
        <button class="login-btn" @click="handleLogin">登录</button>
      </uni-forms>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import AuthUtil from '@/api/member/auth';
import $store from '@/store';
import $router from '@/router'



// 表单数据
const formData = reactive({
  mobile: '15601691388',
  password: 'admin123'
});

// 表单规则
const rules = {
  mobile: [
    { required: true, errorMessage: '请输入手机号', trigger: ['blur', 'change', 'submit'] },
    { pattern: /^1[3-9]\d{9}$/, errorMessage: '请输入正确的手机号码格式', trigger: ['blur', 'change', 'submit'] }
  ],
  password: [
    { required: true, errorMessage: '请输入密码', trigger: ['blur', 'change', 'submit'] },
    { minLength: 6, maxLength: 20, errorMessage: '密码长度应为6-20位', trigger: ['blur', 'change', 'submit'] }
  ]
};

// 表单引用
const formRef = ref(null);

// 处理登录逻辑
const handleLogin = async () => {
  formRef.value.validate().then(res => {
    AuthUtil.login(formData).then(res => {
       if (res.code === 0) {
          // 登录成功，存储用户信息
          const userStore = $store('user');
          userStore.setUserInfo({
            mobile: formData.mobile,
            ...res.data.userInfo
          });
          // 登录成功，跳转到首页
          uni.navigateTo({
            url: '/pages/index/index'
          })
        }
        else {
          // 显示错误信息
          uni.showToast({
            title: res.msg || '登录失败，请重试',
            icon: 'none'
          });
        }
    }).catch(err => {
      console.log('登录错误：', err);
    })
  }).catch(err => {
    console.log('表单错误信息：', err);
  })
  // if (formRef.value) {
  //   try {
  //     const res = await formRef.value.validate();
  //     const result = await AuthUtil.login(formData);
  //     console.log('登录结果：', result);
  //     // 登录成功后的逻辑可以在这里添加
  //     if (res.valid) {


  //       if (result.code === 0) {
  //         // 登录成功，存储用户信息
  //         const userStore = $store('user');
  //         userStore.setUserInfo({
  //           mobile: formData.mobile,
  //           ...result.data.userInfo
  //         });

  //         // 跳转到首页
  //        $router.go({
  //         path: '/pages/index/index'
  //        })
  //       } else {
  //         // 显示错误信息
  //         uni.showToast({
  //           title: result.msg || '登录失败，请重试',
  //           icon: 'none'
  //         });
  //       }
  //     }
  //   } catch (err) {
  //     console.log('表单错误信息：', err);
  //   }
  // }
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.login-form {
  padding: 40rpx;
  background-color: #ffffff;
  margin-top: 80rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50rpx;
}

.logo {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 自定义表单样式 */
.uni-forms {
  margin-top: 20rpx;
}

.uni-forms-item {
  margin-bottom: 30rpx;
}

.uni-forms-item__label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.login-btn {
  background-color: #07c160;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 8rpx;
  margin-top: 40rpx;
}

.login-btn:active {
  background-color: #06ad56;
}
</style>